<template>
    <div>
<!--        <div v-if='mode === "linear"' style='line-height: 30px'>-->
<!--            <p>-->
<!--                海平面测距：{{ LevelDistance }}-->
<!--            </p>-->
<!--            <p>-->
<!--                海底测距：{{ GroundDistance }}-->
<!--            </p>-->
<!--            <p>-->
<!--                温度：{{ Temperature }} ℃-->
<!--            </p>-->
<!--            <p>-->
<!--                压力：{{ Pressure }} N-->
<!--            </p>-->
<!--        </div>-->
        <div v-if='mode === "table"' >
            <el-row>
                <el-col :span='12'>
                    <el-card :style='(gamemode ? "background: transparent" : "")'>
                        <template #header>
                            <span>电池剩余电量</span>
                        </template>
                        <div class='clockNum' id='batteryLevel'>
                            {{ batteryLevel.value }}%
                        </div>
                    </el-card>
                    <el-card :style='(gamemode ? "background: transparent" : "")'>
                        <template #header>
                            <span>电池电流</span>
                        </template>
                        <div class='clockNum' id='batteryCurrent'>
                            {{ batteryCurrent.value }}A
                        </div>
                    </el-card>
                    <el-card :style='(gamemode ? "background: transparent" : "")'>
                        <template #header>
                            <span>深度</span>
                        </template>
                        <div class='clockNum' id='levelDistance'>
                            {{ levelDistance.value }}km
                        </div>
                    </el-card>
                </el-col>
                <el-col :span='12'>
                    <el-card :style='(gamemode ? "background: transparent" : "")'>
                        <template #header>
                            <span>电池温度</span>
                        </template>
                        <div class='clockNum' id='batteryTemperature'>
                            {{ batteryTemperature.value }}°C
                        </div>
                    </el-card>
                    <el-card :style='(gamemode ? "background: transparent" : "")'>
                        <template #header>
                            <span>电池电压</span>
                        </template>
                        <div class='clockNum' id='batteryVoltage'>
                            {{ batteryVoltage.value }}V
                        </div>
                    </el-card>
                    <el-card :style='(gamemode ? "background: transparent" : "")'>
                        <template #header>
                            <span>温度</span>
                        </template>
                        <div class='clockNum' id='temperature'>
                            {{ temperature.value }}°C
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DataSimpl',
    props : {
        mode : {
            type : String,
            default : "linear"
        },
        gamemode : {
            type : Boolean,
            default: false
        }
    },
    data () {
        return {
            levelDistance : { //高度计信息
                value : 0,
                min : 2000,
                max : 0x3f3f3f3f
            },
            temperature : { // 温度
                value : 0,
                min : -4,
                max : 40
            },
            batteryTemperature : { // 温度
                value : 0,
                min : -4,
                max : 40
            },
            batteryCurrent : { // 电流
                value : 0,
                min : -0x3f3f3f3f,
                max : 50
            },
            batteryVoltage : { //电压
                value : 0,
                min : -0x3f3f3f3f,
                max : 50
            },
            batteryLevel : { //电量
                value : 0,
                min : 10,
                mid : 20,
                max : 90
            }
        }
    },
    mounted () {
        // setInterval(this.testData, 3000);	// 测试用函数，之后替换成下面的内容_每三秒更新实时数据到折线图
        setInterval(this.addData, 3000);	// 每三秒更新实时数据到折线图
    },
    methods: {
        // 添加实时数据
        addData : function() {
            // 从接口获取数据并添加到数组
            let _this = this;
            this.$axios.get(this.GLOBAL.serverIp + '/api/seaLevelDistance/').then((res) => {
                _this.levelDistance.value = (res.data.levelDistance * 1).toFixed(1);
                if (_this.levelDistance.value > this.levelDistance.max ||
                    _this.levelDistance.value < this.levelDistance.min) {
                    document.getElementById('levelDistance').style.color="#f78989"
                }
                else {
                    document.getElementById('levelDistance').style.color="#409EFF"
                }
            });
            this.$axios.get(this.GLOBAL.serverIp + '/api/temperatureBoard/').then((res) => {
                _this.temperature.value = (res.data.val * 1).toFixed(1);
                if (_this.temperature.value > this.temperature.max) {
                    document.getElementById('temperature').style.color="#f78989"
                }
                else if (_this.temperature.value < this.temperature.min) {
                    document.getElementById('temperature').style.color="#E6A23C"
                }
                else {
                    document.getElementById('temperature').style.color="#409EFF"
                }
            });
            this.$axios.get(this.GLOBAL.serverIp + '/api/batteryTemperature/').then((res) => {
                _this.batteryTemperature.value = (res.data.val * 1).toFixed(1);
                if (_this.batteryTemperature.value > this.batteryTemperature.max) {
                    document.getElementById('batteryTemperature').style.color="#f78989"
                }
                else if (_this.batteryTemperature.value < this.batteryTemperature.min) {
                    document.getElementById('batteryTemperature').style.color="#E6A23C"
                }
                else {
                    document.getElementById('batteryTemperature').style.color="#409EFF"
                }
            });
            this.$axios.get(this.GLOBAL.serverIp + '/api/batteryCurrent/').then((res) => {
                _this.batteryCurrent.value = (res.data.val * 1).toFixed(1);
                if (_this.batteryCurrent.value > this.batteryCurrent.max) {
                    document.getElementById('batteryCurrent').style.color="#f78989"
                }
                else if (_this.batteryCurrent.value < this.batteryCurrent.min) {
                    document.getElementById('batteryCurrent').style.color="#E6A23C"
                }
                else {
                    document.getElementById('batteryCurrent').style.color="#409EFF"
                }
            });
            this.$axios.get(this.GLOBAL.serverIp + '/api/batteryVoltage/').then((res) => {
                _this.batteryVoltage.value = (res.data.val * 1).toFixed(1);
                if (_this.batteryVoltage.value > this.batteryVoltage.max) {
                    document.getElementById('batteryVoltage').style.color="#f78989"
                }
                else if (_this.batteryVoltage.value < this.batteryVoltage.min) {
                    document.getElementById('batteryVoltage').style.color="#E6A23C"
                }
                else {
                    document.getElementById('batteryVoltage').style.color="#409EFF"
                }
            });
            this.$axios.get(this.GLOBAL.serverIp + '/api/batteryLevel/').then((res) => {
                _this.batteryLevel.value = (res.data.val * 1).toFixed(1);
                if (_this.batteryLevel.value > this.batteryLevel.max) {
                    document.getElementById('batteryLevel').style.color="#67C23A"
                }
                else if (_this.batteryLevel.value > this.batteryLevel.mid) {
                    document.getElementById('batteryLevel').style.color="#409EFF"
                }
                else if (_this.batteryLevel.value > this.batteryLevel.min) {
                    document.getElementById('batteryLevel').style.color="#E6A23C"
                }
                else {
                    document.getElementById('batteryLevel').style.color="#f78989"
                }
            });
        },
        testData : function() {
            this.levelDistance.value = ((Math.random() * 100) + 2000).toFixed(0);
            if (this.levelDistance.value > this.levelDistance.max ||
                this.levelDistance.value < this.levelDistance.min) {
                document.getElementById('levelDistance').style.color="#f78989"
            }
            else {
                document.getElementById('levelDistance').style.color="#409EFF"
            }
            this.temperature.value = ((Math.random() * 20) + 15).toFixed(1);

            if (this.temperature.value > this.temperature.max) {
                document.getElementById('temperature').style.color="#f78989"
            }
            else if (this.temperature.value < this.temperature.min) {
                document.getElementById('temperature').style.color="#E6A23C"
            }
            else {
                document.getElementById('temperature').style.color="#409EFF"
            }
            this.batteryTemperature.value = ((Math.random() * 15) + 30).toFixed(1);

            if (this.batteryTemperature.value > this.batteryTemperature.max) {
                document.getElementById('batteryTemperature').style.color="#f78989"
            }
            else if (this.batteryTemperature.value < this.batteryTemperature.min) {
                document.getElementById('batteryTemperature').style.color="#E6A23C"
            }
            else {
                document.getElementById('batteryTemperature').style.color="#409EFF"
            }
            this.batteryCurrent.value = ((Math.random() * 100)).toFixed(1);

            if (this.batteryCurrent.value > this.batteryCurrent.max) {
                document.getElementById('batteryCurrent').style.color="#f78989"
            }
            else if (this.batteryCurrent.value < this.batteryCurrent.min) {
                document.getElementById('batteryCurrent').style.color="#E6A23C"
            }
            else {
                document.getElementById('batteryCurrent').style.color="#409EFF"
            }
            this.batteryVoltage.value = ((Math.random() * 100)).toFixed(1);

            if (this.batteryVoltage.value > this.batteryVoltage.max) {
                document.getElementById('batteryVoltage').style.color="#f78989"
            }
            else if (this.batteryVoltage.value < this.batteryVoltage.min) {
                document.getElementById('batteryVoltage').style.color="#E6A23C"
            }
            else {
                document.getElementById('batteryVoltage').style.color="#409EFF"
            }
            this.batteryLevel.value = ((Math.random() * 100)).toFixed(0);

            if (this.batteryLevel.value > this.batteryLevel.max) {
                document.getElementById('batteryLevel').style.color="#67C23A"
            }
            else if (this.batteryLevel.value > this.batteryLevel.mid) {
                document.getElementById('batteryLevel').style.color="#409EFF"
            }
            else if (this.batteryLevel.value > this.batteryLevel.min) {
                document.getElementById('batteryLevel').style.color="#E6A23C"
            }
            else {
                document.getElementById('batteryLevel').style.color="#f78989"
            }
        }
    }
}
</script>

<style scoped>

>>> .el-card {
    background: #242424;
    margin: 10px 10px;
}

>>> .el-card__header {
    padding: 10px;
    border-bottom: none;
}
>>> .el-card__body {
    padding: 0;
    text-align:center;
    height: 93.75px;
}
.gamemode_card {

}
@font-face {
    font-family: Batmfa;
    src: url('~@/assets/css/digit/batmfa__.ttf');
    src: url('~@/assets/css/digit/batmfo__.ttf');
}
@font-face {
    font-family: Conthrax;
    src: url('~@/assets/css/digit/conthrax-sb.ttf');
}
.clockNum {
    font-family: Conthrax;
    font-size: 40px;
    padding: 10px;
}
* {
    color: white;
}
</style>
